<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="tushu.css"/>
	</head>
	<body>
	<div id="header"></div>
	<div id="add">添加数据</div>
	<div id="refresh">刷新</div>
	<div id="shows">
		<div id="newbook">
			<div id="top">
				新建书籍
				<span>-</span>
				<span>c</span>
				<span>x</span>
			</div>
			<ul id="left">
				<li><span>书名</span><input type="text" name="bookname" id="bookname" value=""></li>
				<li><span>价格</span><input type="text" name="price" id="price"value=""></li>
				<li><span>会员价</span><input type="text" name="hyprice" id="hyprice"value=""></li>
				<li><span>评分</span><input type="text" name="pf" id="pf" value=""></li>
				<li><span>作者</span><input type="text" name="author" id="author" value=""></li>
				<li><span>出版社</span><input type="text" name="publish" id="publish" value=""></li>
				<li><span>图片</span><input type="text" name="pic" id="pic" value=""/></li>
			</ul>
			<button id="addbtn">添加</button>
		</div>
	</div>
	<table id="tab">
		<thead>
			<tr>
				<th class="th1"><input type="checkbox"/></th>
				<th class="th2">图片</th>
				<th class="th3">书名</th>
				<th class="th4">作者</th>
				<th class="th5">会员价</th>
				<th class="th6">出版社</th>
				<th class="th7">操作</th>
			</tr>
		</thead>
		<tbody id="tbody"></tbody>
	</table>	
	</body>
	<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
//	出现
	$("#add").on("click",function(){
			$("#shows").slideDown("nomal")
		})
//	添加
	$("#addbtn").on('click',function(){
			var shows={
				bookname:bookname.value,
				price:price.value,
				hyprice:hyprice.value,
				pf:pf.value,
				author:author.value,
				publish:publish.value,
				pic:pic.value,			
			}
		$.post("http://localhost:8080/students",shows,function(data){
			$("<tr><td><input type='checkbox'/></td><td><img src="+data.pic+"/></td><td>"+data.bookname+"</td><td>"+data.author+"</td><td>"+data.hyprice+"</td><td>"+data.publish+"</td><td><button class='delete'>删除</button><button class='xiugai'>修改</button></td></tr>").appendTo($("tbody"))
		})
	})	
	$("#addbtn").on("click",function(){
			$("#shows").slideUp("nomal")
		})
	</script>
</html>
